<template>
  <div>
    <div>
      <list-table-search-header
        @search="handleSearch"
        @reset="fetchData(true)"
      />
    </div>
    <div
      style="
        width: 100%;
        max-height: 460px;
        overflow: hidden;
        overflow-y: scroll;
      "
      class="item hasCheckbox"
    >
      <table-panel
        ref="TableRef"
        :table-data="tableData"
        :table-head="column"
        :checkbox="true"
        :border="true"
        @selection-change="handleSelectChange"
      >
        <template #price="{ scope }">
          <span slot="price">
            {{ scope.price / 100 }}
          </span>
        </template>
        <template #opr="{ scope }">
          <el-button
            type="text"
            @click="handleSingleChooseResource(scope)"
          >选择</el-button>
        </template>
      </table-panel>
    </div>
    <div class="footer item">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        :current-page="params.pageNum"
        @current-change="handlePageChange"
      />
      <el-row style="width:100%; display: flex;justify-content: center;margin: 10px 0;">
        <el-button
          type="primary"
          round
          :disabled="tempSelectList.length === 0"
          @click="handleMultipleChooseResource"
        >确认（已选择{{ tempSelectList.length }}项）</el-button>
        <el-button round @click="$emit('close')">取消</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import tablePanel from '../../../components/TablePanel'
import listTableSearchHeader from '../components/listTableSearchHeader'
import { listColumn, LIST_STATE } from '../config'
import { getAppointmentCategoryQryLis } from '@/api/reservation'

export default {
  name: 'ResourceMange',
  components: { tablePanel, listTableSearchHeader },
  props: {
    categoryList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      column: listColumn,
      LIST_STATE,
      tableData: [],
      tempSelectList: [],
      params: {
        name: '',
        pageNum: 1,
        pageSize: 8,
        shopId: '',
        status: ''
      },
      total: 0
    }
  },
  watch: {
    categoryList(rows) {
      rows.forEach((row) => {
        this.$refs.TableRef.setSelection(row, true)
      })
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    handleSelectChange(val) {
      this.tempSelectList = val
    },
    handleSearch(val) {
      this.params = {
        ...this.params,
        ...val,
        pageNum: 1,
        pageSize: 8
      }
      this.fetchData()
    },
    handlePageChange(e) {
      this.params.pageNum = e
      this.fetchData()
    },
    async fetchData(isClear = false) {
      if (isClear) {
        this.params = {
          levelId: '',
          name: '',
          pageNum: 1,
          pageSize: 10,
          shopId: '',
          status: ''
        }
      }
      const { code, data } = await getAppointmentCategoryQryLis(this.params)
      if (code === 0) {
        const { total, list } = data
        this.total = total
        this.tableData = list
        list.map((v) => {
          v.appointmentCategoryId = v.id
        })
        const categoryList = this.categoryList.map(
          (v) => v.appointmentCategoryId
        )
        const SelectionList = list.filter((v) => categoryList.includes(v.id))
        this.$nextTick(() => {
          SelectionList.forEach((row) => {
            this.$refs.TableRef.setSelection(row)
          })
        })
      }
    },
    handleSingleChooseResource(scope) {
      this.$emit('clickSingleChoice', scope)
    },
    handleMultipleChooseResource() {
      this.$emit('clickMultipleChoice', this.tempSelectList)
    }
  }
}
</script>

<style scoped lang="scss">
.item {
  margin: 10px 0;
}
</style>
